<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <div class="nav">
        <nuxt-link to="/">首页 > </nuxt-link>
        <nuxt-link to="/property">产权专区 > </nuxt-link>
        <a href="javascript:;">{{ title }}</a>
      </div>
      <div class="detail-box clearfix">
        <div class="news-con fl">
          <div class="title">
            <h3>转让标的名称：{{info.name}}</h3>
            <p>项目编号：{{info.number}}</p>
            <p style="color: red; padding-top:20px;">转让低价：{{info.transferBasePrice}}万元</p>
          </div>
          <div class="news-con-other-con">
            <div class="other-con-list">
              <h4 class="small-title clearfix">
                <img src="../../assets/img/detail003.png" alt="" />
                <span>报(竞)价方式</span>
              </h4>
              <div class="detail-con">
                <div class="detail-info clearfix">
                  <p>报价结束周期：</p>
                  <p>{{info.offerEndTime}}</p>
                </div>
                <div class="detail-info clearfix">
                  <p>报价规则：</p>
                  <p>{{info.offerRule}}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>报价标的简介：</p>
                  <p>
                  {{info.transferBrief}}
                  </p>
                </div>
              </div>
            </div>
            <div class="other-con-list">
              <h4 class="small-title clearfix">
                <img src="../../assets/img/detail003.png" alt="" />
                <span>竞买登记</span>
              </h4>
              <div class="detail-con">
                <div class="detail-info clearfix">
                  <p>报名方式：</p>
                  <p>
                   {{info.applyWay}}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>看样地点：</p>
                  <p>
                   {{info.seeSite}}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>看样时间：</p>
                  <p>
                    {{info.seeTime}}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>保证金及处理方式：</p>
                  <p>
                    {{info.earnestMoney}}
                  </p>
                </div>
              </div>
            </div>
            <div class="other-con-list">
              <h4 class="small-title clearfix">
                <img src="../../assets/img/detail003.png" alt="" />
                <span>交易方式</span>
              </h4>
              <div class="detail-con">
                <div class="detail-info clearfix">
                  <p>交易地点：</p>
                  <p>
                   {{info.dealSity}}
                  </p>
                </div>
                <div class="detail-info clearfix" >
                  <p>成交确认、价款支付及合同签订：</p>
                  <p>
                   {{info.affirm}}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>标的交割：</p>
                  <p>
                   {{info.transferDelivery}}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>风险提示：</p>
                  <p>
                   {{info.riskHint}}
                  </p>
                </div>
                  <div class="detail-info clearfix">
                  <p>其他事项：</p>
                  <p>
                   {{info.otherThing}}
                  </p>
                </div>
                  <div class="detail-info clearfix">
                  <p>联系方式：</p>
                  <p>
                    {{info.contactWay}}
                  </p>
                </div>
                  <div class="detail-info clearfix">
                  <p>附件：</p>
                  <p>
                    {{info.attachment}}
                  </p>
                </div>
           
              </div>
            </div>
            <div class="price clearfix">
              <span class="fl">竞价金额：</span>
              <input
                type="text"
                v-model="price"
                class="fl"
                placeholder="请输入金额（万元）"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              />
            </div>
            <div class="submit" @click="submit">报价</div>
          </div>
        </div>
        <div class="recormend fr">
          <h3>其他产权资讯</h3>
          <ul>
            <li v-for="(item, index) in newList" :key="index" class="clearfix">
              <div class="recormend-right">
                <p class="small-title" :title="item.name">
                  {{ item.name }}
                </p>
                <p class="time">{{ item.offerEndTime }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage
  },
  data() {
    return {
      newList: [],
      price: "",
      title: "",
      info:{}
    };
  },
  mounted() {
    this.title = this.$route.query.title;
    this.getList();
    this.getDetail();
  },
  methods: {
    submit() {
      if (this.price == "") {
        this.$message.error("请输入金额");
        return;
      }
          this.$http(
        "post",
        "/sys/iaBidding/offer.do",
        {
          offer: this.price,
          id: this.$route.query.id
        }
      )
        .then(res => {
          if (res.code == "0000") {
            this.$message({
              type:'success',
              message:"竞价成功"
            })
          }
          if (res.code =='9995') {
            this.$router.push({path:"/property/apply"})
          }
        })
        .catch(err => {});
    },
    getList() {
      this.$http(
        "get",
        "/sys/iaPropertyRight/findIaPropertyRightListOfficalByPage.do",
        {
          pageNum: 1,
          pageSize: 10
        }
      )
        .then(res => {
          if (res.code == "0000") {
            var data = res.result;
            this.newList = data.rows;
          }
        })
        .catch(err => {});
    },
    getDetail() {
      this.$http("get", "/sys/iaPropertyRight/detail.do", {
        id: this.$route.query.id
      })
        .then(res => {
          if (res.code == "0000") {
            this.info = res.result
          }
        })
        .catch(err => {});
    }
  }
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;
}
.nav {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  margin-left: 68px;
}
.nav a {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}
.news-con {
  width: 885px;
  min-height: 400px;
  padding-left: 35px;
  border-right: 16px solid #f5f5f5;
  background: #fff;
  box-sizing: border-box;
}
.recormend {
  width: 298px;
  min-height: 400px;
  position: relative;
  top: -25px;
  padding: 24px;
  box-sizing: border-box;
  background: #fff;
}
.news-con .title {
  border-bottom: 1px solid #dedede;
  padding-bottom: 16px;
  width: 797px;
  margin-bottom: 25px;
}
.news-con .title h3 {
  text-align: left;
  color: rgba(81, 81, 81, 1);
  font-size: 24px;
  font-weight: 500;
  padding-top: 20px;
  margin-bottom: 10px;
  margin-left: 100px;
}
.news-con .title p {
  text-align: left;
  color: rgba(154, 154, 154, 1);
  font-size: 14px;
  margin-left: 100px;
}

.news-con-other-con {
  width: 671px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.news-con-other-con p {
  text-indent: 20px;
  line-height: 140%;
  font-size: 14px;
}
.news-con-other-con img {
  display: block;
  max-width: 100%;
  margin-bottom: 1px;
}
.recormend h3 {
  font-size: 16px;
  font-weight: 500;
  color: #4a4a4a;
  padding-top: 25px;
  padding-left: 10px;
  position: relative;
  margin-bottom: 30px;
}
.recormend h3::before {
  content: " ";
  position: absolute;
  left: 0;
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
}
.recormend ul li {
  cursor: pointer;
}
.recormend ul li .pic {
  overflow: hidden;
  width: 63px;
  height: 64px;
}
.recormend ul li .pic img {
  width: 100%;
  height: 100%;
  transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  cursor: pointer;
}
.recormend ul li:hover .pic img {
  transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
}

.recormend ul li .recormend-right {
  margin-left: 10px;
}
.recormend ul li .recormend-right p:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  line-height: 140%;
  color: #4a4a4a;
  font-size: 13px;
  margin-top: 2px;
}
.recormend ul li .recormend-right p.time {
  font-size: 12px;
  color: #4a4a4a;
}
.recormend ul li {
  margin-bottom: 27px;
}
.recormend ul li:hover .recormend-right p {
  color: #f48d06;
}
.price {
  margin-top: 20px;
  margin-bottom: 20px;
}
.price span {
  width: 100px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
  line-height: 35px;
  text-align: right;
  margin-right: 10px;
  margin-left: 5px;
}
.price input {
  width: 333px;
  height: 35px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  line-height: 35px;
  text-indent: 10px;
  font-size: 14px;
}
.submit {
  width: 159px;
  height: 44px;
  background: #f48d06;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 6px;
  margin-left: 70px;
  text-align: center;
  line-height: 44px;
  cursor: pointer;
}
.submit:active {
  opacity: 0.7;
}
.small-title {
  margin-bottom: 20px;
  margin-top: 15px;
}
.small-title img {
  float: left;
  width: 19px;
  height: 10px;
  margin-top: 6px;
  margin-right: 5px;
}
.small-title span {
  float: left;
  font-size: 16px;
  color: #4A4A4A;
}
.detail-info p:nth-child(1) {
  float: left;
  width: 100px;
  font-size: 14px;
  
color: rgba(0, 0, 0, 0.65);
text-indent: 0;
text-align: right;
}
.detail-info p:nth-child(2) {
  float: left;
  width: 550px;
  font-size: 14px;
color: #4A4A4A;
text-indent: 0;
margin-left: 15px;
}
.detail-info {
  margin-bottom: 20px;
}
</style>